.mock_browser {
  border: 1px solid $light-grey;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 30px 0 rgba($medium-grey, 0.15);
  margin: $base-spacing 0 $base-spacing*2;

  &-header {
    background: $black;
    border-radius: 5px 5px 0 0;
    display: flex;
    padding: 0.5em;

    @include breakpoint(mobile) {
      display: grid;
      grid-template-columns: 28% 44% 28%;
    }

    &-buttons {
      align-items: center;
      display: flex;
      margin: 0 8px;
      span {
        $size: 12px;
        background: lighten($dark-grey, 8%);
        border-radius: $size;
        display: inline-block;
        height: $size;
        margin-right: 10px;
        width: $size;
      }
    }

    &-address_bar {
      background: #1A232C;
      border: 1px solid #474F56;
      border-radius: 3px;
      color: #C2C2C2;
      flex: 1 0 auto;
      font-family: $code;
      font-size: 12px;
      padding: 0.4em;
      pointer-events: none;
      text-align: center;
    }
  }

  &-body {
    .feed {
      margin: 0 auto !important;

      @include breakpoint(mobile) {
        margin: $base-spacing auto !important;

        .news_item {
          border-bottom: 1px solid $light-grey;
          border-top: 1px solid $light-grey;

          &:first-child() {
            margin-bottom: $base-spacing/2;
          }
        }
      }
    }
  }
}
